namespace("controls.CheckBox",
{
	'@inherits'		 :  w3c.HtmlComponent,
	"@stylesheets" : ["/" + appconfig.namespace + "/cdn/css/Checkbox.css"],
	
	
	initialize : function(){
		this.input = this.querySelector('input[type="checkbox"]');
		this.addEventListener("click", this.onClick.bind(this), false);
	},
	
	canceldrag : function(e){return true;},
	
	mousedown : function(e){
		//this.dispatchEvent(new w3c.CustomEvent("onactive"), true, true, {target:e.target, checked:e.target.checked});
	},
	
	onClick : function(e){
		if(this.hasClass("checked")){this.removeClass("checked")}
		else {this.addClass("checked")};
		this.input.checked = this.hasClass("checked");
		this.dispatchEvent(new w3c.CustomEvent("check"), true, true, {target:e.target, checked:e.target.checked});
	},
	
	oncheck : function(e){
		if(e.eventPhase == 2) {
		}
	},
	
	value : function(){
		return this.input.checked == true;
	},
	
	setLabel : function(str){
		if(str) {
			var el = this.querySelector('.label');
			$(el).css("display", "inline-block");
			$(el).html(str);
		}
	},
	
	innerHTML:
	'<div draggable="false"><span class="indicator"></span><input type="checkbox"/><span class="label" style="display:none;"></span></div>'
});
